<template>
  <div>
    <!-- 标题 -->
    <van-cell :title="$route.query.title">
      <template slot="extra">
        <span> {{ pageNumber }}/{{ idList.length || 1 }}</span>
        <van-icon
          @click="showChose = true"
          class="titleicon"
          name="label-o"
          color="#ee0a24"
        />
      </template>
    </van-cell>
    <!--内容 -->
    <van-tabs class="content" v-model="active" animated>
      <van-tab title="标签" v-for="(item, index) in resList" :key="index">
        <!-- 题目 -->
        <div class="container">
          <div class="contentText">
            <div class="question" v-html="item.materialContent"></div>
            <!-- 答题 单选 -->
            <div                
             class="dragAnswer"            
              v-if="item.type_id === 1">
            <div class="boxdrag">
             <img
              @touchstart="(e)=>handleTouchstart(e)"
              @touchmove="(e)=> handleTouchmove(e)"
              @touchend="(e)=>handleTouchend(e)" 
                class="dragIcon"
                src="../../../assets/images/drag-icon.png"
                alt=""
              />
            </div>
         <div class="dragcontent">
  
              <van-cell>
                <template slot="icon">
                  <van-button class="answericon" round size="mini" type="info">
                    单选题</van-button
                  >
                </template>
                <template> <span v-html="item.title"></span> </template>
              </van-cell>
              <van-radio-group
                v-model="radio"
                v-if="Object.getOwnPropertyNames(item.option).length - 1 === 4"
              >
                <!-- 对象数组循环  ??? -->
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="A"> </van-radio
                  ><span class="radiotype">A、 </span
                  ><span class="radioText" v-html="item.option.A.option"></span>
                </div>
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="B"> </van-radio
                  ><span class="radiotype">B、 </span
                  ><span class="radioText" v-html="item.option.B.option"></span>
                </div>
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="C"> </van-radio
                  ><span class="radiotype">C、 </span
                  ><span class="radioText" v-html="item.option.C.option"></span>
                </div>
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="D"> </van-radio
                  ><span class="radiotype">D、</span
                  ><span class="radioText" v-html="item.option.D.option"></span>
                </div>
              </van-radio-group>
              <van-radio-group
                v-model="radio"
                v-if="Object.getOwnPropertyNames(item.option).length - 1 === 3"
              >
                <!-- 对象数组循环  ??? -->
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="A"> </van-radio
                  ><span class="radiotype">A、 </span
                  ><span class="radioText" v-html="item.option.A.option"></span>
                </div>
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="B"> </van-radio
                  ><span class="radiotype">B、 </span
                  ><span class="radioText" v-html="item.option.B.option"></span>
                </div>
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="C"> </van-radio
                  ><span class="radiotype">C、 </span
                  ><span class="radioText" v-html="item.option.C.option"></span>
                </div>
              </van-radio-group>
              <van-radio-group
                v-model="radio"
                v-if="Object.getOwnPropertyNames(item.option).length - 1 === 2"
              >
                <!-- 对象数组循环  ??? -->
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="A"> </van-radio
                  ><span class="radiotype">A、 </span
                  ><span class="radioText" v-html="item.option.A.option"></span>
                </div>
                <div class="singleRadio" @click="radioSubmit(item)">
                  <van-radio :checked-color="radioErr" name="B"> </van-radio
                  ><span class="radiotype">B、 </span
                  ><span class="radioText" v-html="item.option.B.option"></span>
                </div>
              </van-radio-group>
              
              <!-- 答案解析-->
              <div class="getAnswershow" v-if="showdetail">
                <div class="answer">
                  <span class="blue">答案:</span>
                  <span>{{ item.correct_option }}</span>
                </div>
                <div class="consist">
                  <span class="blue"> 解析:</span>
                  <span>
                    <span v-html="item.parse"></span>
                  </span>
                </div>
              </div>
</div>
            </div>
            <!-- 多选 -->
            <div class="dragAnswer" v-if="item.type_id === 2">
              <img
                class="dragIcon"
                src="../../../assets/images/drag-icon.png"
                alt=""
              />
              <!-- 标题 -->
              <van-cell>
                <template slot="icon">
                  <van-button class="answericon" round size="mini" type="info">
                    多选题
                  </van-button>
                </template>
                <template> <span v-html="item.title"></span> </template>
              </van-cell>
              <!-- 确定 -->
              <!-- 多选内容  -->
              <van-cell>
                <template slot="title">
                  <div
                    :class="
                      multicheck.mulFlag1 ? 'multiInput' : 'multiInputErr'
                    "
                  >
                    <input
                      type="checkbox"
                      name="selected"
                      value="A"
                      v-model="checkName"
                    />
                    <span>A、</span>
                    <label for="checkbox" v-html="item.option.A.option"></label>
                  </div>

                  <div
                    :class="
                      multicheck.mulFlag2 ? 'multiInput' : 'multiInputErr'
                    "
                  >
                    <input
                      type="checkbox"
                      name="selected"
                      value="B"
                      v-model="checkName"
                    />
                    <span>B、</span>
                    <label for="checkbox" v-html="item.option.B.option"></label>
                  </div>
                  <div
                    :class="
                      multicheck.mulFlag3 ? 'multiInput' : 'multiInputErr'
                    "
                  >
                    <input
                      type="checkbox"
                      name="selected"
                      value="C"
                      v-model="checkName"
                    />
                    <span>C、</span>
                    <label for="checkbox" v-html="item.option.C.option"></label>
                  </div>
                  <div
                    :class="
                      multicheck.mulFlag4 ? 'multiInput' : 'multiInputErr'
                    "
                  >
                    <input
                      type="checkbox"
                      name="selected"
                      value="D"
                      v-model="checkName"
                    />
                    <span>D、</span>
                    <label for="checkbox" v-html="item.option.D.option"></label>
                  </div>
                  <div
                    :class="
                      multicheck.mulFlag5 ? 'multiInput' : 'multiInputErr'
                    "
                  >
                    <input
                      type="checkbox"
                      name="selected"
                      value="E"
                      v-model="checkName"
                    />
                    <span>E、</span>
                    <label for="checkbox" v-html="item.option.E.option"></label>
                  </div>
                </template>
              </van-cell>
              <van-button class="multiinputPost" @click="getMultiInput(item)">
                确定
              </van-button>

              <!-- 底部答案 -->
              <div class="getAnswershow" v-if="showdetail">
                <div class="answer">
                  <span class="blue">答案:</span>
                  <span>{{ item.correct_option }}</span>
                </div>
                <div class="consist">
                  <span class="blue"> 解析:</span>
                  <span>
                    <span v-html="item.parse"></span>
                  </span>
                </div>
              </div>
            </div>
            <!-- 问答题 -->
            <div class="dragAnswer" v-if="item.type_id === 3">
              <froala
                class="fuwenben"
                :tag="'textarea'"
                :config="froalaConfig"
                v-model="froalaContent"
              ></froala>
              <van-button type="info"> 确定提交 </van-button>
              <img
                class="dragIcon"
                src="../../../assets/images/drag-icon.png"
                alt=""
              />
              <van-cell>
                <template slot="icon">
                  <van-button class="answericon" round size="mini" type="info">
                    问答题
                  </van-button>
                </template>
                <template> <span v-html="item.title"></span> </template>
              </van-cell>
              <van-notice-bar :scrollable="false" text="本题暂不支持回答。" />

              <!-- 答案解析 -->
              <div class="getAnswershow" v-if="showdetail">
                <div class="answer">
                  <span>答案:</span>
                  <span class="blue">{{ item.correct_option }}</span>
                </div>
                <div class="consist">
                  <span class="blue"> 解析:</span>
                  <span>
                    <span v-html="item.parse"></span>
                  </span>
                </div>
              </div>
            </div>
            <!-- 不定项选择 -->
            <div class="dragAnswer" v-if="item.type_id === 4">
              <img
                class="dragIcon"
                src="../../../assets/images/drag-icon.png"
                alt=""
              />
              <van-cell>
                <template slot="icon">
                  <van-button class="answericon" round size="mini" type="info">
                    不定项选择题
                  </van-button>
                </template>
                <template> <span v-html="item.title"></span> </template>
              </van-cell>
              <van-cell>
                <template slot="title">
                  <input type="checkbox" name="selected" value="82" /><label
                    for="checkbox"
                    >&emsp;多选</label
                  >
                </template>
              </van-cell>
              <!-- 答案解析 -->
              <div class="getAnswershow" v-if="showdetail">
                <div class="answer">
                  <span class="blue">答案:</span>
                  <span>{{ item.correct_option }}</span>
                </div>
                <div class="consist">
                  <span class="blue"> 解析:</span>
                  <span>
                    <span v-html="item.parse"></span>
                  </span>
                </div>
              </div>
            </div>
            <!-- 填空题 -->
            <div class="dragAnswer" v-if="item.type_id === 5">
              <img
                class="dragIcon"
                src="../../../assets/images/drag-icon.png"
                alt=""
              />
              <van-cell>
                <template slot="icon">
                  <van-button class="answericon" round size="mini" type="info">
                    填空题
                  </van-button>
                </template>
                <template> <span v-html="item.title"></span> </template>
              </van-cell>
              <van-cell-group>
                <van-field
                  v-model="value"
                  label="1."
                  placeholder="请输入答案"
                />
                <van-field v-model="value" label="2" placeholder="请输入答案" />
              </van-cell-group>
              <van-cell>
                <template slot="title"> </template>
              </van-cell>
              <!-- 底部解析 -->
              <div class="getAnswershow" v-if="showdetail">
                <div class="answer">
                  <span class="blue">答案:</span>
                  <span>{{ item.correct_option }}</span>
                </div>
                <div class="consist">
                  <span class="blue"> 解析:</span>
                  <span>
                    <span v-html="item.parse"></span>
                  </span>
                </div>
              </div>
            </div>
            <!-- 判断题 -->
            <div class="dragAnswer" v-if="item.type_id === 6">
              <img
                class="dragIcon"
                src="../../../assets/images/drag-icon.png"
                alt=""
              />
              <van-cell>
                <template slot="icon">
                  <van-button class="answericon" round size="mini" type="info">
                    判断题
                  </van-button>
                </template>
                <template> <span v-html="item.title"></span> </template>
              </van-cell>
              <van-cell>
                <template slot="title"> </template>
              </van-cell>

              <!-- 底部解析-->
              <div class="getAnswershow" v-if="showdetail">
                <div class="answer">
                  <span class="blue">答案:</span>
                  <span>{{ item.correct_option }}</span>
                </div>
                <div class="consist">
                  <span class="blue"> 解析:</span>
                  <span>
                    <span v-html="item.parse"></span>
                  </span>
                </div>
              </div>
            </div>
            <!-- 材料题 -->
            <div class="dragAnswer" v-if="item.type_id === 7">
              <img
                class="dragIcon"
                src="../../../assets/images/drag-icon.png"
                alt=""
              />
              <van-cell>
                <template slot="icon">
                  <van-button class="answericon" round size="mini" type="info">
                    材料题
                  </van-button>
                </template>
                <template> <span v-html="item.title"></span> </template>
              </van-cell>
              <van-cell>
                <template slot="title">
                  <input type="checkbox" name="selected" value="82" /><label
                    for="checkbox"
                    >&emsp;多选</label
                  >
                </template>
              </van-cell>
              <!-- 答案解析-->
              <div class="getAnswershow" v-if="showdetail">
                <div class="answer">
                  <span class="blue">答案:</span>
                  <span>{{ item.correct_option }}</span>
                </div>
                <div class="consist">
                  <span class="blue"> 解析:</span>
                  <span>
                    <span v-html="item.parse"></span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 底部工具 -->
    <van-grid class="bottom-tools1" :column-num="3">
      <van-grid-item @click="collect()">
        <template slot="icon">
          <img
            class="icon-collect"
            src="../../../assets/images/star-icon-2.png"
            v-if="false || toolsItem[0].collect_status"
            alt=""
          />
          <img
            class="icon-collect"
            src="../../../assets/images/star-icon.png"
            v-else
            alt=""
          />
        </template>
      </van-grid-item>
      <van-grid-item @click="showEdit1 = true" icon="edit">
        <template slot="icon">
          <!-- {{ $store.state.homework.timeMsg }} -->
          {{ $store.state.homework.timeMsg }}
        </template>
      </van-grid-item>
      <van-grid-item @click="submit()">
        <template slot="icon">交卷 </template>
      </van-grid-item>
    </van-grid>
    <!-- 选择题目 -->
    <van-overlay :show="showChose" class="showchose_test">
      <template slot="default">
        <van-cell
          :title="$route.query.title"
          :value="'共' + idList.length + '道题目'"
        ></van-cell>
        <van-grid :column-num="7">
          <van-grid-item
            v-for="(item, index) in idList"
            :key="index"
            :text="String(index + 1)"
            @click="torightWork(item, index + 1)"
          />
        </van-grid>
      </template>
    </van-overlay>
    <!-- 显示答案 -->
    <van-overlay class="submit" :show="showSubmit">
      <div class="submitContainer">
        <div class="title">
          <span>
            <div class="allsocre">{{ answerSubmit.correctScoreSum }}</div>
            <div class="allsocre1">分</div>
          </span>
          <span>
            <div>总分</div>
            <div class="red">11</div>
            <div>分</div>
          </span>
          <span>
            <div>本次考试耗时</div>
            <div class="red">00:00:13</div>
          </span>
        </div>
        <div class="body">
          <div class="box">
            <div class="child1">题型</div>
            <div class="child2">数量</div>
            <div class="child3">正确</div>
            <div class="child4">错误</div>
          </div>
          <div class="box">
            <div class="child1">单选</div>
            <div class="child2">1</div>
            <div class="child3">0</div>
            <div class="child4 red">0</div>
          </div>
          <div class="box">
            <div class="child1">多选</div>
            <div class="child2">1</div>
            <div class="child3">0</div>
            <div class="child4 red">0</div>
          </div>
          <div class="box">
            <div class="child1">简答</div>
            <div class="child2">1</div>
            <div class="child3">0</div>
            <div class="child4 red">0</div>
          </div>
          <div class="box">
            <div class="child1">判断</div>
            <div class="child2">0</div>
            <div class="child3">0</div>
            <div class="child4 red">0</div>
          </div>
          <div class="box">
            <div class="child1">填空</div>
            <div class="child2">0</div>
            <div class="child3">0</div>
            <div class="child4 red">0</div>
          </div>
        </div>
        <div class="footer">
          <div class="center">本题无法判断对错,按正确积分</div>
          <van-button @click="showdetail1()" class="answer"
            >查看解析</van-button
          >
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { testOne, courseCollect, courseScore, postOneAnswer } from "@/api";
// import { mapActions } from '@/store/modules/homework.js'
export default {
  data() {
    return {
      value: "",
      radio: null,
      radioErr: null,
      //多选答案
      checkName: [],
      //多选校验
      multicheck: {
        mulFlag1: true,
        mulFlag2: true,
        mulFlag3: true,
        mulFlag4: true,
        mulFlag5: true,
      },
      //tab栏索引
      active: 0,
      toolsItem: [],
      //标题选择
      showChose: false,
      //答案汇总分析
      showSubmit: false,
      pageNumber: 1,
      //题库id
      idList: [],
      //题库列表
      resList: null,
      timeMin: 0,
      //总分
      answerSubmit: "",
      //展示答案解析
      showdetail: false,
      //富文本编辑文字
      froalaContent: "",
      froalaConfig: {
        toolbarButtons: [
          "undo",
          "redo",
          "|",
          "bold",
          "italic",
          "|",
          "quote",
          "-",
          "insertLink",
          "insertHR",
        ], 
        theme: "dark", //主题
        placeholder: "请填写内容",
        language: "zh_cn", //国际化
        /* https://www.froala.com/wysiwyg-editor/docs/options*/
        toolbarSticky: true, //操作栏是否自动吸顶
        zIndex: 99999,
        events: {
          "froalaEditor.initialized": function () {
            console.log("initialized");
          },
        },
      },
       // 拖动页面使事件 
      touchstartY:0,
      touchMOveY:0,
      startY:-328
   
    };
  },
  created() {
    //请求 页面数据
    this.getList1();
  },
  mounted() {},
  computed: {
    //监听计算属性  收藏状态
    // collectState(){
    //        return  this.toolsItem[0].collect_status
    // }
  },
  methods: {
    //记录起始点
   handleTouchstart(e) { 
    // console.log(e.targetTouches[0].clientY,"开始触碰");
    this.touchstartY=e.targetTouches[0].clientY
    }, 
    //处理拖拽
    handleTouchmove(e) {
      this.touchMOveY=e.targetTouches[0].clientY
      let Y=this.touchstartY-this.touchMOveY
      var dragAnswer=document.querySelector(".dragAnswer")
       //禁止滚动条滚动
      document.body.addEventListener('touchmove', function(e){
      e.preventDefault();
      }, { passive:false });

      // 定位;
      if(this.startY>=-328&&this.startY<=-77){
          dragAnswer.style.bottom=Y+this.startY+"px"; 
      }   
    },
    handleTouchend(e) {
       var dragAnswer=document.querySelector(".dragAnswer")
       //  盒子移动结束的位置  
       this.startY=+dragAnswer.style.bottom.substring(0,dragAnswer.style.bottom.indexOf("p"))
       console.log(this.startY,'1111');
       console.log(e,'结束');   
    }, 
    //提交多选  填空同理
    async getMultiInput(item) {
      let answer = Object.values(this.checkName);
      // 根据数组长度判断 提交个数
      const data = {
        currentId: item.id,
        uid: this.$store.state.uid,
        answer: Object.values(this.checkName),
      };
      try {
        const { data: res } = await postOneAnswer(data);
        console.log(res, "提交单次");
        //  存VUEX 数据持久化  ✔
        //  如果答题过 覆盖vuex中的值
        const flag = this.$store.state.homework.previousExamPapers.filter(
          (item) => {
            return item.Cid === this.toolsItem[0].id;
          }
        );
        console.log(flag, "mul");
        // console.log(flag,'falg');vuex
        if (flag.length !== 0) {
          //  这里去重vuex
          // console.log("这里去重");
          this.$store.commit("homework/mappreviousExamPapers", {
            Cid: item.id,
            Canswer: answer,
            typeId: item.type_id,
          });
        } else {
          // 这里推送 vuex
          //  console.log("这里推送");
          this.$store.commit("homework/addpreviousExamPapers", {
            Cid: item.id,
            Canswer: answer,
            typeId: item.type_id,
          });
        }
        //跳转下一页
        this.active += 1;
        //页码顺序改变
        this.pageNumber += 1;
        //清空多选题的值
        this.checkName = [];
        // 工具栏  因为要跳转  [{}] 统一拿这种格式  多地方需要用
        this.toolsItem = [this.resList[this.active]];
      } catch (error) {
        console.log(error);
      }
    },
    //清空表单值  和校验状态
    clearValue() {
      (this.checkName = []), (this.radio = "");
    },
    //  选择题目
    torightWork(id, index) {
      //标题顺序
      this.pageNumber = index;
      //控制跳转索引
      this.active = index - 1;
      //关闭跳转遮罩层
      this.showChose = false;
      this.clearValue();
      this.toolsItem = this.resList.filter((item1) => {
        return item1.id == id;
      });
      console.log(this.toolsItem, "dsa");
      //如果答题过有这一项  则根据题型 来赋值
      const flag = this.$store.state.homework.previousExamPapers.filter(
        (item) => {
          return item.Cid === this.toolsItem[0].id;
        }
      );
         // 赋值  校验
           // 提交了试卷的标识符  才可以校验 渲染答案解析
        if (this.$store.state.homework.previousExamPapersState === true) {
          //单选  判断题   👇
          if (
            this.toolsItem[0].type_id === 1 ||
            this.toolsItem[0].type_id === 6
          ) {
            this.radio = flag[0].Canswer;
            //校验单选框
            if (this.toolsItem[0].correct_option !== this.radio) {
              this.radioErr = "#ee0a24";
            } else {
              this.radioErr = "";
            }
            //  多选 👇
          } else if (this.toolsItem[0].type_id === 2) {
            //答题过就校验  这是提交试卷 的确认标识符
            //多选赋值
            this.checkName = flag[0].Canswer;
            // arr2中不属于  arr1的项  推到arr3中 判断对错 arr1是自己选择的  arr2正确答案  arr3错误答案  取出不同项  方便分类校验
            this.checkMulinput()
            //填空题  👇
          } else if (this.toolsItem[0].type_id === 5) {
          }
        }
    },
    //校验 多选框
    checkMulinput(){
            var arr1 = this.checkName;
            var arr2 = this.toolsItem[0].correct_option
              .split("")
              .join(" ")
              .split(" ");
            let arr3 = [];
            for (let i = 0; i < arr1.length; i++) {
              for (let j = 0; j < arr2.length; j++) {
                if (arr2.indexOf(arr1[i]) === -1) {
                  arr3.push(arr1[i]);
                }
              }
              arr3 = Array.from(new Set(arr3));
              console.log(arr3, "错误");
              //数组包含这一项   多选校验
              if (arr3.indexOf("A") > -1) {
                this.multicheck.mulFlag1 = false;
              }
              if (arr3.indexOf("B") > -1) {
                this.multicheck.mulFlag2 = false;
              }
              if (arr3.indexOf("C") > -1) {
                this.multicheck.mulFlag3 = false;
              }
              if (arr3.indexOf("D") > -1) {
                this.multicheck.mulFlag4 = false;
              }
              if (arr3.indexOf("E") > -1) {
                this.multicheck.mulFlag5 = false;
              }
            }
    },
    //单选  提交
    async radioSubmit(item) {
      const data = {
        currentId: item.id,
        uid: this.$store.state.uid,
        answer: this.radio,
      };
      try {
        const { data: res } = await postOneAnswer(data);
        //  存VUEX 数据持久化  ✔
        //  如果答题过 覆盖vuex中的值
        const flag = this.$store.state.homework.previousExamPapers.filter(
          (item1) => {
            // console.log(item1, this.toolsItem, "dsad");
            return item1.Cid === this.toolsItem[0].id;
          }
        );
        // console.log(flag);
        if (flag.length !== 0) {
          this.$store.commit("homework/mappreviousExamPapers", {
            Cid: item.id,
            Canswer: this.radio,
            typeId: item.type_id,
          });
        } else {
          this.$store.commit("homework/addpreviousExamPapers", {
            Cid: item.id,
            Canswer: this.radio,
            typeId: item.type_id,
          });
        }
        //跳转下一页
        this.active += 1;
        //页码顺序改变
        this.pageNumber += 1;
        //清空单选的值
        this.radio = "";
        // 工具栏  因为要跳转
        this.toolsItem = [this.resList[this.active]];
        console.log(this.toolsItem, "跳转");
      } catch (error) {
        console.log(error);
      }
    },
    //答题完成 获取展示数据
    async getScore() {
      try {
        const { data: res } = await courseScore({
          subjectId: this.$route.query.id,
          uid: this.$store.state.uid,
        });
        console.log(res, "答案");
        this.answerSubmit = res.data;
        this.showSubmit = true;
      } catch (err) {
        console.log(err);
      }
    },
    //收藏
    async collect() {
      this.toolsItem[0].collect_status = !this.toolsItem[0].collect_status;
      try {
        const { data: res } = await courseCollect({
          questionId: this.toolsItem[0].id,
          uid: this.$store.state.uid,
        });
      } catch (err) {
        console.log(err);
      }
    },
    //答题提交
    submit() {
      Dialog.confirm({
        title: "确认提交后不能修改",
        message: "是否提交试卷",
        confirmButtonText: "提交",
        confirmButtonColor: "#0486fe",
        cancelButtonText: "在检查下",
      })
        .then(() => {
          // on confirm  请求
          this.getScore();
        })
        .catch(() => {
          // on cancel
        });
    },
    //展示解析
    showdetail1() {
      this.$store.commit("homework/previousExamPapersToTrue");
      this.showdetail = true;
      this.showSubmit = null;
      //这里也开始校验
    },
    async getList1() {
      try {
        const { data: res } = await testOne({
          subjectId: this.$route.query.id,
          uid: this.$store.state.uid,
        });
        //题目数据
        this.idList = res.data.idList;
        this.resList = res.data.list;
        //倒计时
        this.timeMin = res.data.mins;
        this.toolsItem.push(res.data.list[0]);
        console.log(this.resList, this.idList, "list");
        //判断是否开启过  答题   下次进来继续保持原先计时状态
        if (this.$store.state.homework.timeAll !== 0) {
          return;
        } else {
          this.$store.dispatch("homework/countTimeAction", this.timeMin);
        }
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.question{
  height: 250px;
}
.contentText{
  position: relative;
  .dragAnswer{
    position: absolute;
    bottom: -328px;
    left: 0px;
    padding-top: -15px; 
    .singleRadio{
      background-color: #fff;
    }
     }
}
/deep/.boxdrag{
  display: flex;
  justify-content:center; 
  margin-bottom: 10px;
}
/deep/.van-tabs__content,
.van-tabs__content--animated {
  height: 623px;
}
.bottom-tools1 {
  position: fixed;
  padding: 0px;
  width: 100%;
  height: 49px;
  bottom: 0;
  left: 0;
  img { 
    width: 24px;
    height: 24px;
  }
}

/deep/div.van-tabs.van-tabs--line > div.van-tabs__wrap {
  display: none;
}
//拖拽图标
.dragAnswer {
  width: 100vw;
  height: 338px;
  // background-color: red;
  .dragIcon {
    width: 30px;
    height: 15px;
    top: -26px;
    left: 50%;
    margin-left: -15px;
 
  }
}
.answericon {
  margin-top: 14px;
  color: #4caaff;
  background-color: #e6f7ff;
  border: 0.026667rem solid #1989fa;
  margin-right: 5px;
}
.question {
  background-color: #efeff4;
}
.showchose_test {
  background-color: #fff;
}
.singleRadio {
  display: flex;
  text-align: center;
  .radiotype {
    width: 20px;
    height: 60px;
    padding-top: 20px;
  }
  .van-radio {
    width: 50px;
    height: 60px;
  }
  .radioText {
    padding-top: 6px;
  }
}
.red {
  color: #f68989;
}
//展示答案
/deep/.submit {
  background-color: rga(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .submitContainer {
    width: 296px;
    border-radius: 10px;
    height: 500px;
    background-color: #fff;
    .title {
      padding-bottom: 20px;
      padding-top: 20px;
      display: flex;
      flex-direction: column;
      text-align: center;
      /deep/.allscore1 {
        line-height: 55px;
      }
      > span {
        display: flex;
        justify-content: center;
        > div {
          color: #909399;
          font-size: 12px;
        }
        .red {
          color: #f68989;
        }
        .allsocre {
          color: #0486fe;
          font-size: 48px;
          font-weight: bold;
        }
        .allsocre1 {
          line-height: 55px;
          margin-left: 6px;
        }
      }
    }
    .box {
      display: flex;
      justify-content: space-between;
      div:nth-first-of-type() {
        font-weight: 600;
      }
      > div {
        width: 50px;
        height: 21px;
        margin-bottom: 12px;
        text-align: center;
      }
    }
    .footer {
      display: flex;
      flex-direction: column;
      text-align: center;
      .center {
        color: #b0b2b6;
      }
      .answer {
        margin-top: 25px;
        background-color: #04a9fe;
        width: 200px;
        height: 36px;
        margin-left: 40px;
        color: #fff;
      }
    }
  }
}
div.content.van-tabs.van-tabs--line
  > div.van-tabs__content.van-tabs__content--animated {
  height: 720px;
}
 //滚动条样式
.dragcontent {
  height: 420px;
  overflow-y: scroll;
  scroll-behavior: smooth;
  overscroll-behavior: contain; //必须加这个，不然会带动整个屏幕滚动，如果整屏幕也有滚动的话
  & ::-webkit-scrollbar-track-piece {
    background: rgba(242, 242, 242, 1);
  }
  &::-webkit-scrollbar {
    width: 2px;
  }
  &::-webkit-scrollbar-thumb {
    background: #efeff4;
    background-clip: padding-box;
  }
}  
.getAnswershow {
  padding-left: 6px;
  .answer {
    display: flex;
    justify-content: start;
  }
  .blue {
    color: #83c3ff;
  }
}
.singleRadio {
  display: flex;
}

.multiinputPost {
  width: 100%;
  display: block;
  background: rgba(24, 144, 255, 1);
  height: 35px;
  color: #fff;
  line-height: 35px;
  border-radius: 5px;
  font-size: 16px;
  margin: 0 12px 12px;
}
.multiInput {
  display: flex;
}
//多选错误校验
.multiInputErr {
  display: flex;
  color: red;
}
/deep/.fr-second-toolbar {
  display: none;
}
</style>
